import React, { useState } from 'react';
import { Table, Select, Space } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';

const { Option } = Select;

const LogManagement = () => {
  const [logs] = useState([
    { id: 1, user: 'admin', action: '登录系统', timestamp: '2025-09-01 10:30:25', ip: '192.168.1.100', status: '成功' },
    { id: 2, user: 'admin', action: '修改用户张三信息', timestamp: '2025-09-01 10:25:12', ip: '192.168.1.100', status: '成功' },
    { id: 3, user: 'admin', action: '删除用户王五', timestamp: '2025-09-01 10:20:45', ip: '192.168.1.100', status: '成功' },
    { id: 4, user: 'admin', action: '添加新角色编辑', timestamp: '2025-09-01 10:15:30', ip: '192.168.1.100', status: '成功' },
    { id: 5, user: 'admin', action: '登录系统', timestamp: '2025-09-01 09:00:15', ip: '192.168.1.100', status: '成功' },
    { id: 6, user: 'admin', action: '登录失败', timestamp: '2025-09-01 08:55:20', ip: '192.168.1.101', status: '失败' },
  ]);

  const [filters, setFilters] = useState({
    action: '',
    status: ''
  });

  const handleFilterChange = (value, type) => {
    setFilters(prev => ({
      ...prev,
      [type]: value
    }));
  };

  const filteredLogs = logs.filter(log => {
    return (
      (filters.action ? log.action.includes(filters.action) : true) &&
      (filters.status ? log.status === filters.status : true)
    );
  });

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '16px' }}>
        <h2>操作日志</h2>
      </div>
      
      <Space style={{ marginBottom: '16px', padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ marginBottom: '4px', color: '#555', fontSize: '14px' }}>操作类型</span>
          <Select
            placeholder="全部"
            style={{ width: 120 }}
            allowClear
            onChange={(value) => handleFilterChange(value, 'action')}
            value={filters.action || undefined}
          >
            <Option value="登录">登录</Option>
            <Option value="修改">修改</Option>
            <Option value="删除">删除</Option>
            <Option value="添加">添加</Option>
          </Select>
        </div>
        
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ marginBottom: '4px', color: '#555', fontSize: '14px' }}>状态</span>
          <Select
            placeholder="全部"
            style={{ width: 120 }}
            allowClear
            onChange={(value) => handleFilterChange(value, 'status')}
            value={filters.status || undefined}
          >
            <Option value="成功">成功</Option>
            <Option value="失败">失败</Option>
          </Select>
        </div>
      </Space>

      <Table 
        dataSource={filteredLogs} 
        rowKey="id"
        pagination={{
          total: filteredLogs.length,
          showTotal: (total) => `共 ${total} 条记录`,
          showSizeChanger: true,
          showQuickJumper: true
        }}
      >
        <Table.Column
          title="序号"
          dataIndex="id"
          key="id"
        />
        <Table.Column
          title="操作用户"
          dataIndex="user"
          key="user"
        />
        <Table.Column
          title="操作类型"
          dataIndex="action"
          key="action"
        />
        <Table.Column
          title="操作时间"
          dataIndex="timestamp"
          key="timestamp"
        />
        <Table.Column
          title="IP地址"
          dataIndex="ip"
          key="ip"
        />
        <Table.Column
          title="状态"
          dataIndex="status"
          key="status"
          render={(status) => (
            <Space>
              {status === '成功' ? (
                <CheckCircleOutlined style={{ color: '#52c41a' }} />
              ) : (
                <CloseCircleOutlined style={{ color: '#f5222d' }} />
              )}
              {status}
            </Space>
          )}
        />
      </Table>
    </div>
  );
};

export default LogManagement;